<script>
import loginJs from "@/mixins/login.js"
const loginMp4 = require('../../../public/ga/login.mp4');
export default {
  mixins: [loginJs],
  data() {
    return {
      userInfo: {
        username: '',
        password: '',
        code: ''
      },
      disabled: false,
      loginMp4: loginMp4,
      myPlayer: null
    }
  },
  mounted() {
    this.initVideo()
  },
  methods: {
    handleCodeImgLoad() {},
    initVideo() {
      let e = this.$root.scale || 1;
        //初始化视频方法
      this.myPlayer = this.$video('video', {
        // 确定播放器是否具有用户可以与之交互的控件。没有控件，启动视频播放的唯一方法是使用autoplay属性或通过Player API。
        controls: true,
        //自动播放属性,muted:静音播放
        autoplay: "muted",
        //建议浏览器是否应在<video>加载元素后立即开始下载视频数据。
        preload: "auto",
        //设置视频播放器的显示宽度（以像素为单位）
        width: 1920 * e + "px",
        //设置视频播放器的显示高度（以像素为单位）
        height: 1080 * e + "px",
        // 循环播放
        loop: true
      });
    },
    renderLoginBox() {
      return <c-form class="login-box anim_fade_image">
        <c-form-item class="username-form-item">
          <c-input
            v-model={this.userInfo.username}
            placeholder="请输入用户名"
            nativeOnKeydown={this.handleLogin.bind(this)}
          ></c-input>
        </c-form-item>
        <c-form-item class="pwd-form-item">
          <c-input
            v-model={this.userInfo.password}
            type="password"
            placeholder="请输入密码"
            nativeOnKeydown={this.handleLogin.bind(this)}
          ></c-input>
        </c-form-item>
        {
          // <c-form-item class="code-form-item">
          //   <c-input
          //     v-model={this.userInfo.code}
          //     class="code"
          //     placeholder="请输入验证码"
          //     nativeOnKeydown={this.handleLogin.bind(this)}
          //   ></c-input>
          //   <img on-load={this.handleCodeImgLoad} ref="codeImg" class="img"/>
          // </c-form-item>
        }
        <c-form-item class="btn-form-item">
          <c-button
            class="login-btn"
            disabled={this.disabled}
            on-click={this.handleLogin.bind(this, "userInfo")}
            nativeOnKeydown={this.handleLogin.bind(this)}
          >
          </c-button>
            </c-form-item>
      </c-form>
    }
  },
  render() {
    return (
      <div class="login-bg-ga">
        <video id="video" ref="video" class="video-js">
          <source src={this.loginMp4} type="video/mp4"></source>
        </video>
        <div class="login-title anim_fade_image"></div>
        {
          this.renderLoginBox()
        }
      </div>
    );
  },
  beforeDestroy() {
    this.myPlayer && this.myPlayer.dispose()
  }
}
</script>

<style lang="scss">
.login-bg-ga {
  box-sizing: border-box;
  width: 1920px;
  height: 1080px;
  position: relative;
  .video-js {
    width: 1920px !important;
    height: 1080px !important;
  }
  .vjs-tech {
    pointer-events: none;
  }
  .vjs-big-play-button,
  .vjs-control-bar {
    display: none !important;
  }
  .login-title {
    position: absolute;
    width: 776px;
    height: 53px;
    left: 578px;
    top: 285px;
    right: 567px;
    z-index: 2;
    background-image: url(~@/assets/images/ga/title.png);
    background-size: 100% 100%;
  }
  .login-box {
    width: 335px;
    height: 348px;
    z-index: 2;
    position: absolute;
    left: 788px;
    top: 379px;
    right: 798px;
    background-image: url(~@/assets/images/ga/login-box.png);
    background-size: 100% 100%;
    padding: 66px 40px;
    display: flex;
    flex-direction: column;
    // justify-content: space-between;
    .username-form-item {
      margin: 0;
    }
    .pwd-form-item {
      margin: 24px 0 48px 0;
    }
    .el-form-item__content {
      height: 48px;
      line-height: 48px;
      input {
        height: 48px;
      }
    }
    input:-internal-autofill-previewed,
    // input::placeholder,
    input:-internal-autofill-selected {
      -webkit-text-fill-color: rgba(255, 255, 255, 0.8) !important;
      font-family: YouSheBiaoTiHei;
      font-weight: 400;
      font-size: 16px;
      transition: background-color 5000s ease-in-out 0s !important;
    }
    input::placeholder {
      font-size: 16px;
      font-family: YouSheBiaoTiHei Regular, YouSheBiaoTiHei Regular-Regular;
      font-weight: 400;
      // text-align: left;
      color: rgba(255, 255, 255, 0.3) !important;
      // line-height: 40px;
    }
    input {
      background: rgba(193, 243, 255, 0.12);
      border-radius: 2px;
      font-size: 16px;
      color: rgba(255, 255, 255, 0.8);
      border: 1px solid rgba(193, 243, 255, 0.12);
    }
    .el-input__inner {
      padding: 0 20px !important;
    }

    // .code-form-item {
    //   .el-form-item__content {
    //     display: flex;
    //     align-items: center;
    //     .code {
    //       width: 167px;
    //       height: 48px;
    //       margin-right: 20px;
    //     }
    //     .img {
    //       width: 98px;
    //       height: 48px;
    //     }
    //   }
    // }
    .login-btn {
      width: 257px;
      height: 48px;
      cursor: pointer;
      background-image: url(~@/assets/images/ga/login.png);
      background-size: 100% 100%;
      border: none;
    }
  }
}
</style>

<style>
:root {
  --animate-duration: 3s;
  --animate-delay: 3s;
  --animate-repeat: 1;
}
@-webkit-keyframes myfadeIn {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}
.anim_fade_image {
  transition: opacity 1s;
  -webkit-animation-name: myfadeIn;
  -webkit-animation-duration: 1s;
  -webkit-animation-direction: alternate;
}
</style>